<template>
  <div class="data-source-wrap">
    <div class="header">
      <div class="add-data-source" @click="addDataSource">+添加数据源</div>
      <div class="data-source-operation">
        <el-button type="warning" @click="requestTest">请求测试</el-button>
        <el-button type="primary" @click="saveDataSource">保存</el-button>
      </div>
    </div>
    <div class="content">
      <div class="sidebar">
        <div class="request">
          <div :class="[
            'item',
            currentDataSource?.key == item.key ? 'active' : '',
          ]" v-for="(item, index) in lowCode.dataSource" :key="index" @click="onClickDataSource(item)">
            <div class="type">{{ item.method }}</div>
            <div class="name">{{ item.name }}</div>
            <div class="handle">
              <div class="remove" v-if="currentDataSource?.key == item.key" @click.stop="removeDataSource(item.key)">
                <i class="iconfont icon-shanchu"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main" v-if="dataSourceForm">
        <el-form ref="dataSourceFormRef" :model="dataSourceForm" :rules="dataSourceRules" label-width="100px"
          class="demo-ruleForm">
          <el-form-item label="名称" prop="name">
            <el-input v-model="dataSourceForm.name" />
          </el-form-item>
          <el-form-item label="请求地址" prop="url">
            <el-input v-model="dataSourceForm.url" />
          </el-form-item>
          <el-form-item label="请求方法" prop="method">
            <el-radio-group v-model="dataSourceForm.method">
              <el-radio-button label="GET" />
              <el-radio-button label="POST" />
              <el-radio-button label="PUT" />
              <el-radio-button label="DELETE" />
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div class="flex items-center px-30 py-20">
          <div class="w-1/4" style="color: #606266; font-size: 14px">
            是否表单初始化自动发出
          </div>
          <div class="w-3/4">
            <el-switch v-model="dataSourceForm.auto" class="ml-2" active-color="#13ce66" inactive-color="#ff4949" />
          </div>
        </div>

        <div class="flex">
          <div class="w-100 text-right pr-12" style="color: #606266; font-size: 14px">
            数据处理
          </div>
          <div class="flex-1">
            <el-collapse v-model="activeNames">
              <el-collapse-item title="请求发送前：" name="1">
                开发中......
              </el-collapse-item>
              <el-collapse-item title="请求返回响应数据时：" name="2">
                开发中......
              </el-collapse-item>
              <el-collapse-item title="请求发生错误时：" name="3">
                开发中......
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, reactive, onMounted } from "vue";
import { lowCode } from "@/components/low-code/core/index";
import { DataSourceType } from "@/components/low-code/core/type";
import { ElMessage } from "element-plus";

export default defineComponent({
  setup() {
    const noSave = ref(false);
    const dataSourceFormRef = ref();
    const defaultDataSource = lowCode.dataSourceController.currentDataSource;
    const dataSourceForm = reactive({
      key: "",
      name: "",
      url: "",
      method: "GET",
      auto: false,
    });

    const dataSourceRules = {
      name: [{ required: true, message: "请填写数据源名称", trigger: "blur" }],
      url: [{ required: true, message: "请填写数据源地址", trigger: "blur" }],
      method: [
        { required: true, message: "请选择数据源方法", trigger: "change" },
      ],
    };
    onMounted(() => {
      Object.assign(dataSourceForm, <DataSourceType>defaultDataSource);
    });

    const currentDataSource = computed(() => {
      if (lowCode.dataSourceController.currentDataSource) {
        return lowCode.dataSourceController.currentDataSource;
      }
      return null;
    });

    const addDataSource = () => {
      let dataSource = lowCode.dataSourceController.addDataSource();
      Object.assign(dataSourceForm, <DataSourceType>dataSource);
    };

    const copyDataSource = (key: string) => {
      lowCode.dataSourceController.copyDataSource(key);
    };

    const removeDataSource = (key: string) => {
      lowCode.dataSourceController.removeDataSource(key);
      ElMessage.success("删除成功");
      dataSourceFormRef.value.resetFields();
    };

    const onClickDataSource = (dataSource: DataSourceType) => {
      lowCode.dataSourceController.currentDataSource = dataSource;
      Object.assign(dataSourceForm, <DataSourceType>dataSource);
    };

    const saveDataSource = () => {
      dataSourceFormRef.value.validate((valid: any, fields: any) => {
        if (valid) {
          lowCode.dataSourceController.updateDataSource({
            key: dataSourceForm.key,
            name: dataSourceForm.name,
            url: dataSourceForm.url,
            method: dataSourceForm.method,
            auto: dataSourceForm.auto,
          });
          ElMessage.success("保存成功");
        } else {
          ElMessage.error("请完善数据源")
        }
      });
    };

    const requestTest = () => {
      ElMessage.warning("功能待开发");
    };

    const activeNames = ref("");

    return {
      noSave,
      dataSourceFormRef,
      dataSourceRules,
      lowCode,
      dataSourceForm,
      currentDataSource,
      addDataSource,
      onClickDataSource,
      copyDataSource,
      removeDataSource,
      saveDataSource,
      requestTest,
      activeNames,
    };
  },
});
</script>

<style scoped>
.data-source-wrap {
  margin: 20px;
  border: 1px solid rgb(238, 238, 238);
  min-height: 200px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}

.data-source-wrap .header {
  min-height: 50px;
  background: #f2f6fc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.data-source-wrap .add-data-source {
  font-size: 14px;
  color: #409eff;
  cursor: pointer;
  user-select: none;
}

.data-source-wrap .data-source-operation {}

.data-source-wrap .content {
  display: flex;
  min-height: 200px;
}

.data-source-wrap .content .sidebar {
  width: 30%;
  align-items: stretch;
  border-right: 1px solid rgb(238, 238, 238);
}

.data-source-wrap .content .main {
  flex: 1;
  align-items: stretch;
  padding: 20px;
}

.request {
  padding: 15px;
}

.request .item {
  border: 1px solid #dcdfe6;
  background: #fff;
  border-radius: 3px;
  padding: 5px !important;
  height: auto;
  line-height: 20px;
  cursor: default;
  position: relative;
  margin-top: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}

.request .item .type {
  width: 70px;
  color: #67c23a;
}

.request .item .name {
  color: #65686e;
  width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.request .item .handle {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 15px;
}

.request .item .handle .copy {
  color: #7dc4f9;
  margin-right: 10px;
  cursor: pointer;
}

.request .item .handle .remove {
  color: #fc5757;
  cursor: pointer;
}

.request .active {
  background: #e4e7ed;
  color: #303133;
}
</style>
